<template>
  <autoTable
      :searchConfig="searchConfig"
      :columns="columns"
      :dataSource="data"
      :loading="loading"
      :actions="actions"
      :pagination="pagination"
      :actionButtons="actionButtons"
      @search="onSearch"
      @action="onAction"
      @change="onTableChange"
      @buttonClick="onButtonClick"
  />
  <autoModal
      ref="modalRef"
      :formConfig="formConfig"
      :mode="mode"
      :onSubmit="onModalSubmit"
  />
</template>

<script>
import autoTable from '@/components/AutoTable/index.vue'
import autoModal from "@/components/AutoModal/index.vue"

export default {
  name: 'TablePage',
  components: {
    autoTable,
    autoModal
  },
  data() {
    return {
      //功能栏
      searchConfig: [
        {key: 'name', label: '名称', type: 'input'},
        {
          key: 'status',
          label: '状态',
          type: 'select',
          defaultValue: 'enabled',
          props: {
            options: [
              {label: '启用', value: 'enabled'},
              {label: '禁用', value: 'disabled'},
            ],
            allowClear: true,
          },
        },
      ],
      columns: [
        {title: '名称', dataIndex: 'name', key: 'name'},
        {title: '状态', dataIndex: 'status', key: 'status'},
      ],
      data: [
        {id: 1, name: 'Jack', status: '启用'},
        {id: 2, name: 'Tom', status: '禁用'},
      ],
      loading: false,
      actions: [
        {text: '编辑', key: "edit"},
        {text: '删除', key: "delete"},
      ],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 2,
      },
      actionButtons: [
        {key: "add", label: "新增"}, {key: 'export', label: '导出', ghost: true},
        {key: 'batchDelete', label: '批量删除', danger: true}
      ],
      formConfig: [
        {key: "name", label: "姓名", type: "input", rules: [{required: true}], defaultValue: ""},
        {key: "age", label: "年龄", type: "input", defaultValue: "18"},
        {key: "desc", label: "描述", type: "textarea", defaultValue: ""},
        {key: "fileList", label: "图片上传", type: "image-upload", defaultValue: []},
      ],
      mode: "add",

      //
      fileList:[]
    }
  },
  methods: {
    onSearch(params) {
      console.log('搜索：', params)
    },
    onAction({action, record}) {
      console.log('操作按钮点击', action, record)
      if (action === 'edit') {
        this.mode = "edit";
        this.$refs.modalRef.open(record);
      }
    },
    onTableChange(pagination) {
      console.log('分页变化', pagination)
    },
    onButtonClick(action) {
      console.log("点击功能区", action);
      if ("add" === action) {
        this.mode = "add"
        this.$refs.modalRef.open({fileList:[{name:"1231231"}]});
      }
    },
    async onModalSubmit(action, obj) {
      console.log(action, obj);
      await new Promise((resolve) => setTimeout(resolve, 3000)); // 模拟接口等待
    }
  },
}
</script>
